<template>
  <div>
    <div v-if="submenu.subMenus" :index='submenu.url'>
      <div class="line-box">
        <img v-if="submenu.css" :src="submenu.css">
        <span>{{ submenu.name }}</span>
      </div>
      <nav-submenu
        v-for="(item, index) in submenu.subMenus"
        :key="index"
        :submenu="item"
      />
    </div>
    <div v-else class="menu-item-wrap">
      <el-menu-item :index="submenu.url" style="padding-left: 20px; margin-bottom: 5px;">
        <i v-if="submenu.css" :class="['iconfont', 'mr-10', submenu.css]"></i>
        <span v-if="!isHide">{{ submenu.name }}</span>
      </el-menu-item>
    </div>
  </div>
</template>

<script>
import NavSubmenu from '@/components/Navigation/NavSubmenu'

export default {
  name: 'NavSubmenu',
  props: {
    submenu: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isHide: Boolean
  },
  components: {
    NavSubmenu
  }
}
</script>
